<template>
  <el-container>
    <el-main>
      <!-- 静态文件列表 -->
      <el-card class="file-category" shadow="never">
        <template #header>
          <div class="card-header">
            <span>Static 文件夹</span>
          </div>
        </template>
        <el-table :data="staticFiles" style="width: 100%" border>
          <el-table-column prop="id" label="ID" width="100" align="center"/>
          <el-table-column prop="name" label="文件名" width="250" align="center"/>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.row, 'static')"><el-icon><Delete /></el-icon> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- Banner 文件列表 -->
      <el-card class="file-category" shadow="never">
        <template #header>
          <div class="card-header">
            <span>Banner 文件夹</span>
          </div>
        </template>
        <el-table :data="bannerFiles" style="width: 100%" border>
          <el-table-column prop="id" label="ID" width="100" align="center"/>
          <el-table-column prop="name" label="文件名" width="250" align="center"/>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button size="small" type="danger" @click="handleDelete(scope.row, 'banner')"><el-icon><Delete /></el-icon> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';
import { useStore } from 'vuex'
import { useRouter } from "vue-router";
import { printInfo } from '@/util/log';
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const staticFiles = ref([]); // 静态文件列表
    const bannerFiles = ref([]); // Banner 文件列表
    const uploadDialogVisible = ref(false);
    const folderDialogVisible = ref(false);
    const store = useStore()
    const router = useRouter()
    const isLoggedIn = computed(() => !!store.state.Authorization)
    const folderForm = ref({ name: '' });

    // 获取文件列表
    const fetchFileList = async () => {
      try {
        const response = await axios.get(import.meta.env.VITE_API_HOST + '/fileList.php');
        const data = response.data;

        // 处理静态文件
        staticFiles.value = data.static.map((name) => ({
          id: name.id,
          name: name.name,
          type: '文件',
        }));

        // 处理 Banner 文件
        bannerFiles.value = data.banner.map((name) => ({
          id: name.id,
          name: name.name,
          type: '文件',
        }));
      } catch (error) {
        console.log(error)
        ElMessage.error('获取文件列表失败');
      }
    };

    // 删除文件
    const handleDelete = async (file, directory) => {
      try {
        const result = await axios.post(`${import.meta.env.VITE_API_HOST}/fileDel.php?directory=${directory}&filename=${file.name}`)
        if (result.data.status == 'success') {
          ElMessage.success('删除成功');
          fetchFileList()
        } else {
          ElMessage.error('删除失败');
        }
      }catch (error) {
        console.log(error)
        ElMessage.error('请求错误');
      }
    };

    // 组件挂载时获取文件列表
    onMounted(() => {
      fetchFileList();
      if (isLoggedIn.value) {
        printInfo({ title: "登录成功", text: "欢迎回来", type: "success", plain: true });
      } else {
        printInfo({ title: "登录失败", text: "请检查你的登录信息", type: "error", plain: true });
        router.push("/login");
        store.dispatch('logout');
      }
    });

    return {
      staticFiles,
      bannerFiles,
      uploadDialogVisible,
      folderDialogVisible,
      folderForm,
      handleDelete,
    };
  },
};
</script>

<style scoped>
.el-header {
  background-color: #f5f5f5;
  padding: 20px;
}

.file-category {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}
</style>
